<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>连续滚动轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 800px;
            border: 10px solid saddlebrown;
            height: 200px;
            /* overflow: hidden; */
            /* 溢出隐藏 */
            position: relative;
        }
        .move{
            width: 2000px;    
            position: absolute;
            top: 0;
            left: 0;
        }
        ul {   
            list-style: none;
            overflow: hidden;/* 清除浮动 */
            
        }
        li { 
            float: left;
            width: 200px;
            height: 200px;
        }
        li:first-child{
            background: red;
        }
        li:nth-child(2){
            background: orange;
        }
        li:nth-child(3){
            background: yellow;
        }
        li:nth-child(4){
            background: green;
        }
        li:nth-child(5){
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="move">
                <ul>
                        <li>1</li> 
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
        </div>       
    </div>

    <script>
        // 将ul的内容复制一份
        var ul=document.getElementsByTagName('ul')[0];
        ul.innerHTML+=ul.innerHTML;

        // offsetLeft表示当前盒子的外边框距离外层盒子的内边框的间距
        // 获取折返点  得到其offsetLeft值


        window.onload=function(){
            // 设置定时器
            var timer;
            var nowleft=0;
            var move=document.getElementsByTagName('div')[1];
            // 每50ms执行一次run函数
            timer=setInterval(run,50);
            function run(){
                nowleft-=10;
                // 判断，当5块li都移完后，将Left重新置为0
                if(nowleft<=-1000){
                    nowleft=0;
                    clearInterval(timer);
                }
                move.style.left=nowleft+'px';
            }
        }
        
    </script>

</body>
</html>